<template>
  <div class="crud-opts">
    <span class="crud-flex">
      <!--左侧插槽-->
      <slot name="left"/>
      <img class="img" src="@images/update.png" alt="" @click="doReply()">
      <el-popover v-if="checkPermission(['appTask:edit'])" placement="bottom-start" width="200" trigger="click" style="height:30px">
        <img class="img" slot="reference" src="@images/more.png" alt="">
        <div>
          <el-row>
            <el-col :span="12" style="margin-top: 5px;">
              <el-row>
                <label>批量操作</label>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-button v-permission="permission.edit==undefined ? ['']:permission.edit"
                           :disabled="crud.selections.length == 0" type="text" :loading="crud.delAllLoading"
                           @click="changeStatus(crud.selections)">修改运行状态</el-button>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-popover>
      <el-popover placement="bottom-end" width="150" trigger="click" style="height:30px">
        <img class="img" slot="reference" src="@images/gezi.png" alt="">
        <el-checkbox v-model="allColumnsSelected" :indeterminate="allColumnsSelectedIndeterminate"
                     @change="handleCheckAllChange">
          全选
        </el-checkbox>
        <el-checkbox v-for="(item,i) in crud.props.tableColumns" :key="i" v-model="item.visible"
                     @change="handleCheckedTableColumnsChange(item)">
          {{ item.label }}
        </el-checkbox>
      </el-popover>
      <el-popover v-if="isShowQuery" placement="bottom-start" width="888" style="height:30px" trigger="click" ref="popoverName">
        <img class="img" slot="reference" src="@images/shaixuan.png" alt="">
        <div>
          <el-form ref="form" :model="queryForm" label-position="right" label-width="100px"
                   style="max-height: 560px;overflow-y: auto;">
            <div v-for="(item, index) in moreQueryList" :key="index">
              <el-row v-if="item.type == 'textarea'">
                <el-col :span="14">
                  <el-form-item :label="item.name" :prop="item.cloumLable" class="item">
                    <el-input type="textarea" :rows="2" :placeholder="item.placeholder"
                              v-model.trim="queryForm[item.cloumLable]" style="width: 400px;"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="item.type == 'input'">
                <el-col :span="14">
                  <el-form-item :label="item.name" :prop="item.cloumLable" class="item">
                    <el-input v-model.trim="queryForm[item.cloumLable]" :placeholder="item.placeholder"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="item.type == 'radio'">
                <el-col :span="20">
                  <el-form-item :label="item.name" :prop="item.cloumLable" class="item">
                    <el-radio-group v-model="queryForm[item.cloumLable]" size="medium">
                      <el-radio-button v-for="(ob,i) in item.radioList" :key="i"
                                       :label="ob.label">{{ ob.value }}</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="item.type == 'datePicker'">
                <el-col :span="14">
                  <el-form-item :label="item.name" :prop="item.cloumLable" class="item">
                    <el-date-picker v-model="queryForm[item.cloumLable]" @change="dateChange(item.cloumLable)"
                                    value-format="yyyyMMdd" type="date" placeholder="选择日期" style="width: 400px;"/>
                  </el-form-item>
                </el-col>
                <el-col :span="10" style="padding-left: 20px;line-height: 33px;">
                  <el-radio v-model="queryForm[item.cloumLableType]" @change="fastDate(item.cloumLable,index * 10 + 0)"
                            :label="index * 10 + 0">今天</el-radio>
                  <el-radio v-model="queryForm[item.cloumLableType]" @change="fastDate(item.cloumLable,index * 10 + 1)"
                            :label="index * 10 + 1">昨天</el-radio>
                  <el-radio v-model="queryForm[item.cloumLableType]" @change="fastDate(item.cloumLable,index * 10 + 2)"
                            :label="index * 10 + 2">前天</el-radio>
                </el-col>
              </el-row>
              <el-row v-if="item.type == 'dateNoTimePicker'">
                <el-col :span="14">
                  <el-form-item :label="item.name" :prop="item.cloumLable" class="item">
                    <el-date-picker v-model="queryForm[item.cloumLable]" @change="dateChange(item.cloumLable)"
                                    value-format="yyyyMMdd" type="daterange" range-separator="至"
                                    start-placeholder="开始时间" end-placeholder="结束时间" style="width: 400px;"/>
                  </el-form-item>
                </el-col>
                <el-col :span="10" style="padding-left: 20px;line-height: 33px;">
                  <el-radio v-model="queryForm[item.cloumLableType]"
                            @change="selectDateFramePicker(item.cloumLable,index * 10 + 0)"
                            :label="index * 10 + 0">本周</el-radio>
                  <el-radio v-model="queryForm[item.cloumLableType]"
                            @change="selectDateFramePicker(item.cloumLable,index * 10 + 1)"
                            :label="index * 10 + 1">本月</el-radio>
                </el-col>
              </el-row>
              <el-row v-if="item.type == 'timeFramePicker'">
                <el-col :span="14">
                  <el-form-item :label="item.name" :prop="item.cloumLable" class="item">
                    <el-date-picker v-model="queryForm[item.cloumLable]" @change="dateTimeRangeChange(item.cloumLable)"
                                    value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至"
                                    start-placeholder="开始时间" end-placeholder="结束时间"/>
                  </el-form-item>
                </el-col>
                <el-col :span="10" style="padding-left: 20px;line-height: 33px;">
                  <el-radio v-model="queryForm[item.cloumLableType]"
                            @change="selectTimeFramePicker(item.cloumLable,index * 10 + 0)"
                            :label="index * 10 + 0">今天</el-radio>
                  <el-radio v-model="queryForm[item.cloumLableType]"
                            @change="selectTimeFramePicker(item.cloumLable,index * 10 + 1)"
                            :label="index * 10 + 1">昨天</el-radio>
                  <el-radio v-model="queryForm[item.cloumLableType]"
                            @change="selectTimeFramePicker(item.cloumLable,index * 10 + 2)"
                            :label="index * 10 + 2">本周</el-radio>
                  <el-radio v-model="queryForm[item.cloumLableType]"
                            @change="selectTimeFramePicker(item.cloumLable,index * 10 + 3)"
                            :label="index * 10 + 3">本月</el-radio>
                </el-col>
              </el-row>
            </div>
            <el-divider>
              <span @click="handleChange">{{ showInfo }}</span>
            </el-divider>
            <div v-for="item in moreQueryList" :key="item.name">
              <el-row v-if="item.type == 'radioIsShow' && isShow">
                <el-col :span="20">
                  <el-form-item :label="item.name" :prop="item.cloumLable" class="item">
                    <el-radio-group v-model="queryForm[item.cloumLable]" size="medium">
                      <el-radio-button v-for="(ob,i) in item.radioList" :key="i"
                                       :label="ob.label">{{ ob.value }}</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="item.type == 'inputIsShow' && isShow">
                <el-col :span="14">
                  <el-form-item :label="item.name" :prop="item.cloumLable" class="item">
                    <el-input v-model="queryForm[item.cloumLable]" :placeholder="item.placeholder"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
          <el-row style="border-top: 1px solid #EBEEF5;padding-top: 10px;text-align: center;">
            <el-button @click="doReset" style="width: 80px;">重置</el-button>
            <el-button type="primary" @click="doMoreQuery" style="width: 80px;">查询</el-button>
          </el-row>
        </div>
      </el-popover>
    </span>
    <!--右侧-->
    <slot name="right"/>
    <el-button-group class="crud-opts-right">
      <el-pagination :page-size.sync="page.size" :total="page.total" :page-sizes="[10, 50, 100, 300, 500, 1000]"
                     :current-page.sync="page.page" style="margin-top: 8px;" layout="prev,pager,next,sizes,total"
                     @size-change="crud.sizeChangeHandler($event)" @current-change="crud.pageChangeHandler"
                     :pager-count="5" prev-text=" " next-text=" "/>
    </el-button-group>
  </div>
</template>
<script>
import CRUD, {crud, pagination} from '@crud/crud'
import checkPermission from '@/utils/permission' // 权限判断函数

export default {
  mixins: [crud(), pagination()],
  props: {
    permission: {
      type: Object,
      default: null
    },
    isShowQuery: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      allColumnsSelected: true,
      allColumnsSelectedIndeterminate: false,
      qryParam: '',
      qryCloum: '',
      form: {
        taskStatus: null
      },
      queryForm: {},
      showInfo: '展开',
      isShow: false,
      defaultQueryForm: {
        jobCodes: null,
        jobName: null,
        taskCode: null,
        taskName: null,
        taskStatus: '',
        bz: null,
        isEndTask: '',
        isOrder: '',
        execStTsPicker: [],
        execEndTsPicker: [],
        shellPath: null,
        extParam: null,
        dependJob: null,
        dependTask: null,
        mutexJob: null,
        mutexTask: null,
        bizDate: '',
      },
      moreQueryList: [
        {
          cloumLable: 'jobCodeFuzzy',
          name: '作业编码',
          type: 'input',
          placeholder: '请输入作业编码，支持单个模糊查询和批量精确查询用逗号分割',
          defaultValue: null
        },
        {
          cloumLable: 'taskNameFuzzy',
          name: "任务名称",
          type: 'input',
          placeholder: '请输入任务名称，支持单个模糊查询和批量精确查询用逗号分割',
          defaultValue: null
        },
        {
          cloumLable: 'taskCodeFuzzy',
          name: "任务编码",
          type: 'input',
          placeholder: '请输入任务编码，支持单个模糊查询和批量精确查询用逗号分割',
          defaultValue: null
        },
        {
          cloumLable: 'taskStatus',
          name: "任务状态",
          type: 'radio',
          placeholder: '',
          defaultValue: null,
          radioList: [{
            label: '',
            value: '全部'
          },
            {
              label: '1',
              value: '待处理'
            },
            {
              label: '2',
              value: '处理中'
            },
            {
              label: '4',
              value: '处理完成'
            },
            {
              label: '5',
              value: '处理失败'
            },
            {
              label: '6',
              value: '置虚'
            },
            {
              label: '3',
              value: '暂停'
            }
          ]
        },
        {
          cloumLable: 'bz',
          cloumLableType: 'bzType',
          name: "业务日期",
          type: 'dateNoTimePicker',
          placeholder: '',
          defaultValue: null

        },
        {
          cloumLable: 'execStTsPicker',
          cloumLableType: 'execStTsPickerType',
          name: "开始时间",
          type: 'timeFramePicker',
          placeholder: '',
          defaultValue: null
        },
        {
          cloumLable: 'execEndTsPicker',
          cloumLableType: 'execEndTsPickerType',
          name: "结束时间",
          type: 'timeFramePicker',
          placeholder: '',
          defaultValue: null
        },
        {
          cloumLable: 'isEndTask',
          name: '结束任务',
          type: 'radioIsShow',
          placeholder: '',
          defaultValue: null,
          radioList: [{label: '', value: '全部'},
            {label: '1', value: '是'},
            {label: '2', value: '否'}
          ]
        },
        {
          cloumLable: 'isOrder',
          name: '顺序执行',
          type: 'radioIsShow',
          placeholder: '',
          defaultValue: null,
          radioList: [{label: '', value: '全部'},
            {label: '1', value: '是'},
            {label: '2', value: '否'}
          ]
        },
        {
          cloumLable: 'shellPath',
          name: '脚本路径',
          type: 'inputIsShow',
          placeholder: '',
          defaultValue: null
        },
        {
          cloumLable: 'extParam',
          name: '外部参数',
          type: 'inputIsShow',
          placeholder: '',
          defaultValue: null
        },
        {
          cloumLable: 'dependJob',
          name: '依赖作业',
          type: 'inputIsShow',
          placeholder: '',
          defaultValue: null
        },
        {
          cloumLable: 'dependTask',
          name: '依赖任务',
          type: 'inputIsShow',
          placeholder: '',
          defaultValue: null
        },
        {
          cloumLable: 'mutexJob',
          name: '互斥作业',
          type: 'inputIsShow',
          placeholder: '',
          defaultValue: null
        },
        {
          cloumLable: 'mutexTask',
          name: '互斥任务',
          type: 'inputIsShow',
          placeholder: '',
          defaultValue: null
        }
      ]
    }
  },
  created() {
    this.crud.updateProp('searchToggle', true)
    if (this.crud.params.bizDate == '' || this.crud.params.bizDate) {
      this.queryForm = this.crud.params
    } else {
      this.queryForm = JSON.parse(JSON.stringify(this.defaultQueryForm));
    }
  },
  methods: {
    checkPermission,
    handleChange() {
      this.isShow = !this.isShow
      if (this.isShow == true) {
        this.showInfo = "折叠"
      } else {
        this.showInfo = "展开"
      }
    },
    doReset() {
      this.queryForm = JSON.parse(JSON.stringify(this.defaultQueryForm));
      this.doMoreQuery();
    },
    doMoreQuery() {
      this.$refs['popoverName'].doClose()
      this.crud.page.page = 1;
      this.crud.params = JSON.parse(JSON.stringify(this.queryForm));
      this.crud.toQuery();
    },
    dateChange(cloumLable) {
      let cloum = cloumLable + "Type";
      this.queryForm[cloum] = null;
    },
    fastDate(cloum, index) {
      index = index % 10;
      this.queryForm[cloum] = this.$moment().add(-index, 'days').format('YYYYMMDD');
    },
    dateTimeRangeChange(cloumLable) {
      let cloum = cloumLable + "Type";
      this.queryForm[cloum] = null;
    },
    selectTimeFramePicker(cloum, index) {
      index = index % 10;
      if (0 == index) {
        this.queryForm[cloum] = [];
        this.queryForm[cloum].push(this.$moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'));
        this.queryForm[cloum].push(this.$moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'));
      }
      if (1 == index) {
        this.queryForm[cloum] = [];
        this.queryForm[cloum].push(this.$moment().add(-1, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss'));
        this.queryForm[cloum].push(this.$moment().add(-1, 'days').endOf('day').format('YYYY-MM-DD HH:mm:ss'));
      }
      if (2 == index) {
        this.queryForm[cloum] = [];
        this.queryForm[cloum].push(this.$moment().startOf('isoWeek').format('YYYY-MM-DD HH:mm:ss'));
        this.queryForm[cloum].push(this.$moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'));
      }
      if (3 == index) {
        this.queryForm[cloum] = [];
        this.queryForm[cloum].push(this.$moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'));
        this.queryForm[cloum].push(this.$moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'));
      }
    },
    selectDateFramePicker(cloum, index) {
      index = index % 10;
      if (0 == index) {
        this.queryForm[cloum] = [];
        this.queryForm[cloum].push(this.$moment().startOf('isoWeek').format('YYYYMMDD'));
        this.queryForm[cloum].push(this.$moment().endOf('day').format('YYYYMMDD'));
      }
      if (1 == index) {
        this.queryForm[cloum] = [];
        this.queryForm[cloum].push(this.$moment().startOf('month').format('YYYYMMDD'));
        this.queryForm[cloum].push(this.$moment().endOf('day').format('YYYYMMDD'));
      }
    },
    handleCheckAllChange(val) {
      if (val === false) {
        this.$message({
          message: '请至少选择一列',
          type: 'warning'
        });
        this.allColumnsSelected = true
        return
      }
      for (const key in this.crud.props.tableColumns) {
        this.crud.props.tableColumns[key].visible = val
      }
      this.allColumnsSelected = val
      this.allColumnsSelectedIndeterminate = false
    },
    handleCheckedTableColumnsChange(item) {
      let totalCount = 0
      let selectedCount = 0
      for (const key in this.crud.props.tableColumns) {
        ++totalCount
        selectedCount += this.crud.props.tableColumns[key].visible ? 1 : 0
      }
      if (selectedCount === 0) {
        this.crud.notify('请至少选择一列', CRUD.NOTIFICATION_TYPE.WARNING)
        this.$nextTick(function () {
          item.visible = true
        })
        return
      }
      this.allColumnsSelected = selectedCount === totalCount
      this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
    },
    doReply() {
      this.crud.findVM('presenter').$refs['table'].clearFilter()
      let jobCode = this.crud.query['jobCode']
      let bizDate = this.crud.query['bizDate']
      this.crud.query = {}
      this.crud.params = {}
      this.qryParam = ''
      this.qryCloum = ''
      this.crud.query['jobCode'] = jobCode
      this.crud.query['bizDate'] = bizDate
      this.queryForm = JSON.parse(JSON.stringify(this.defaultQueryForm))
      this.crud.toQuery()
    },
    changeStatus(data) {
      let formData = {
        selections: data,
        taskStatus: ""
      }
      this.crud.editType.changeStatus = true;
      this.crud.toEdit(formData);
    },
  }
}
</script>

<style>
.crud-opts {
  padding: 6px 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.crud-opts .crud-opts-right {
  margin-left: auto;
}


</style>
